import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import styles from './Layout.less';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Button,
  Modal,
  Avatar,
  message,
  Badge,
  Radio,
  Upload,
  Icon,
} from 'antd';

@Form.create()
export default class Layout extends PureComponent {
  constructor(props) {
    super(props);

    console.log('初始化数据', this.props.initValue)

    this.state = {
      fileList: [],
      file: null,
    };
  }

  render() {
    const { item, total } = this.props;
    return (
      <div className={styles.container} key={item.layoutId}>
        {item.layoutStyle == "0" ?
          <div className={styles.item}>
            <img src={require('../../assets/padRecomm/pic0.png')} className={styles.img} />
            <div className={styles.buttonContainer}>
              <button onClick={() => this.props.editLayout(item)}>编辑</button>
              <button disabled={item.weight == this.props.first ? true : false} onClick={() => this.props.forwardLayout(item)}>前移</button>
              <button disabled={item.weight == this.props.last ? true : false} onClick={() => this.props.backLayout(item)}>后移</button>
              <button onClick={() => this.props.addLayout(item)}>添加布局</button>
              <button onClick={() => this.props.deleteLayout(item)}>删除</button>
            </div>
          </div>
          :
          item.layoutStyle == "1" ?
            <div className={styles.item}>
              <img src={require('../../assets/padRecomm/pic1.png')} className={styles.img} />
              <div className={styles.buttonContainer}>
                <button onClick={() => this.props.editLayout(item)}>编辑</button>
                <button disabled={item.weight == this.props.first ? true : false} onClick={() => this.props.forwardLayout(item)}>前移</button>
                <button disabled={item.weight == this.props.last ? true : false} onClick={() => this.props.backLayout(item)}>后移</button>
                <button onClick={() => this.props.addLayout(item)}>添加布局</button>
                <button onClick={() => this.props.deleteLayout(item)}>删除</button>
              </div>
            </div>
            :
            item.layoutStyle == "2" ?
              <div className={styles.item}>
                <img src={require('../../assets/padRecomm/pic2.png')} className={styles.img} />
                <div className={styles.buttonContainer}>
                  <button onClick={() => this.props.editLayout(item)}>编辑</button>
                  <button disabled={item.weight == this.props.first ? true : false} onClick={() => this.props.forwardLayout(item)}>前移</button>
                  <button disabled={item.weight == this.props.last ? true : false} onClick={() => this.props.backLayout(item)}>后移</button>
                  <button onClick={() => this.props.addLayout(item)}>添加布局</button>
                  <button onClick={() => this.props.deleteLayout(item)}>删除</button>
                </div>
              </div> :
              item.layoutStyle == "3" ?
                <div className={styles.item}>
                  <img src={require('../../assets/padRecomm/pic3.png')} className={styles.img} />
                  <div className={styles.buttonContainer}>
                    <button onClick={() => this.props.editLayout(item)}>编辑</button>
                    <button disabled={item.weight == this.props.first ? true : false} onClick={() => this.props.forwardLayout(item)}>前移</button>
                    <button disabled={item.weight == this.props.last ? true : false} onClick={() => this.props.backLayout(item)}>后移</button>
                    <button onClick={() => this.props.addLayout(item)}>添加布局</button>
                    <button onClick={() => this.props.deleteLayout(item)}>删除</button>
                  </div>
                </div> :
                item.layoutStyle == "4" ?
                  <div className={styles.item}>
                    <img src={require('../../assets/padRecomm/pic4.png')} className={styles.img} />
                    <div className={styles.buttonContainer}>
                      <button onClick={() => this.props.editLayout(item)}>编辑</button>
                      <button disabled={item.weight == this.props.first ? true : false} onClick={() => this.props.forwardLayout(item)}>前移</button>
                      <button disabled={item.weight == this.props.last ? true : false} onClick={() => this.props.backLayout(item)}>后移</button>
                      <button onClick={() => this.props.addLayout(item)}>添加布局</button>
                      <button onClick={() => this.props.deleteLayout(item)}>删除</button>
                    </div>
                  </div> :
                  item.layoutStyle == "5" ?
                    <div className={styles.item}>
                      <img src={require('../../assets/padRecomm/pic5.png')} className={styles.img} />
                      <div className={styles.buttonContainer}>
                        <button onClick={() => this.props.editLayout(item)}>编辑</button>
                        <button disabled={item.weight == this.props.first ? true : false} onClick={() => this.props.forwardLayout(item)}>前移</button>
                        <button disabled={item.weight == this.props.last ? true : false} onClick={() => this.props.backLayout(item)}>后移</button>
                        <button onClick={() => this.props.addLayout(item)}>添加布局</button>
                        <button onClick={() => this.props.deleteLayout(item)}>删除</button>
                      </div>
                    </div> :
                    null
        }

      </div>
    )
  }
}